<template>
  <div class="content">
    <div class="cloud-header">
      <h2>商圈设置</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-subset-title">
        <div class="cloud-subset-action">
          <Button color="primary" v-popup.businessDistrict="{}" data-title="添加商圈">添加商圈</Button>
        </div>
        <p class="cloud-subset-tips"><br></p>
      </div>
      <div class="cloud-rules-body">
        <Table :datas="datas" stripe :loading="loading">
          <TableItem title="商圈名" prop="name" align="center"></TableItem>
          <TableItem title="省" prop="province" align="center"></TableItem>
          <TableItem title="市" prop="city" align="center"></TableItem>
          <TableItem title="县区" prop="county" align="center"></TableItem>
          <TableItem title="状态" align="center">
            <template slot-scope="{data}">
              {{data.status==1?'启用':'停用'}}
            </template>
          </TableItem>
          <TableItem title="操作" align="center">
            <template slot-scope="{data}">
              <button class="h-btn h-btn-no-border"  :id="data._id" v-popup.businessDistrict="data" data-title="编辑商圈">编辑</button>
            </template>
          </TableItem>
          <div slot="empty">自定义提醒：暂时无数据</div>
        </Table>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      loading: false,
      datas: []
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.getDatas();
  },
  methods: {
    getDatas() {
      this.loading = true;
      this.$cloud.name('businessDistrict').limit(-1).select().then(res => {
        this.datas = res;
        this.loading = false;
      }).catch(error => {
        log(error);
        this.loading = false;
      });
    }
  }
};

</script>
<style lang="less" scoped="true">
.cloud-rules-body {
  margin: 0 15px;
}

</style>
